<template>
  <div>
    <div class="header-top body-heavy" :style="{'background': backgroundColor}">
      <div class="header-top-left div-align-justify-center"  @click="onClickLeft">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.0001 19.9201L8.48009 13.4001C7.71009 12.6301 7.71009 11.3701 8.48009 10.6001L15.0001 4.08008" stroke="#242424" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="header-top-middle div-align-justify-center">{{ title }}</div>
      <div class="header-top-right div-align-justify-center" @click="onClickRight">{{ rightText }}</div>
    </div>
  </div>
</template>

<script>
import { NavBar } from "vant";
export default {
  props: {
    title: {type: String, default: () => ('')},
    rightText: {type: String, default: () => ('')},
    rightRouter: {type: String, default: () => ('')},
    rightParam: {type: Object, default: () => ({})},
    rightEvent: {type: Boolean, default: () => (false)},
    leftRouter: {type: String, default: () => ('')},
    backgroundColor: {type: String, default: () => ('#FCD538')},
  },
  components: {
    [NavBar.name]: NavBar,
  },
  data() {
    return {};
  },
  methods: {
    onClickRight() {
      if (this.rightEvent) {
        this.$emit("rightClickEvent");
      } else {
        let path = this.rightRouter
        if (this.rightParam.id){
          path = path + this.rightParam.id
        }
        this.$router.push({path: path, query: this.rightParam.query});
      }
    },
    onClickLeft() {
      this.$emit("leftClickEvent");
      if (!this.leftRouter){
        this.$router.go(-1)
      }else{
        this.$router.push(this.leftRouter);
      }
    },
  },
};
</script>


<style scoped>
.header-top {
  height: 44px;
  padding: 44px 12px 0 12px;
  display: flex;
}
.header-top-left {
  width: 10%;
}
.header-top-middle {
  width: 80%;
}
.header-top-right {
  width: 10%;
}
</style>